<template>
  <div style="padding-top:100px">
    <div class="app-title-container title-position">
      <modules-title titleName="稳定性箱变更审批">
        <template slot="btn">
          <el-button class="filter-item" plain="" size="small"
                     @click="handleBack">返回
          </el-button>
           <approval :affair.sync="auditData" :is-text="false" @refresh="refreshData" @submit="onSubmit" @toEdit="toEdit" @cancel="onCancel" />
          <!-- <el-button type="primary" size="small" icon="el-icon-coordinate"
                     v-hasPermi="{v:['sampleInspection:dealWith:and'],isF:(!(data.change_status == '已确定'||data.change_status == '已结束') && isAudit )}"
                     @click="handlAnd()"
          >
            审批
          </el-button> -->
        </template>
      </modules-title>
    </div>

    <div style="padding:20px">
      <itemTitle title="基础数据"></itemTitle>
       <el-form label-width="160px" size="small" :label-position="left">
        <el-row :gutter="80">
          <el-col :span="8">
            <el-form-item label="变更申请编号：">
              <span>{{data.change_box_no}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="原稳定性箱编号：">
              <span>{{data.old_instrument.instrument_no}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="原稳定性箱名称：">
              <span>{{data.old_instrument.instrument_name}}</span>
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item label="更换后稳定性箱编号：">
              <span>{{data.new_instrument.instrument_no}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="更换后稳定性箱名称：">
              <span>{{data.new_instrument.instrument_name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="稳定性方案：">
              <span>{{data.stability_scheme_name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="稳定性考察类型：">
             <span>{{data.inspect_type.inspect_type_name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="放置条件：">
              <span>{{data.place_conditions.place_conditions_name}}</span>
            </el-form-item>
          </el-col>
           <el-col :span="8">
            <el-form-item label="样品名称：">
              <span>{{data.sample_info.sample_name}}</span>
            </el-form-item>
          </el-col>
           <el-col :span="8">
            <el-form-item label="放/取样计划编号：">
              <span>{{data.plan_no	}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目名称：">
              <span>{{data.project_name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目负责人：">
              <span>{{data.project_leader_name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="变更原因：">
              <span>{{data.change_reason}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请人：">
              <span>{{data.creator_name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="申请时间：">
              <span>{{data.created_at}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="附件">
              <file-preview v-if="data.enclosure!=null&&data.enclosure!=[]"
                            :file-list="data.enclosure" 
                            :fileBtnOption="['preview']"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- <el-card header="基础数据" shadow="never">
         <el-form label-width="160px" size="small" :label-position="left">
        <el-row :gutter="80">
          <el-col :span="8">
            <el-form-item label="变更申请编号：">
              <span>{{data.change_box_no}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="变更原因：">
              <span>{{data.change_reason}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请人：">
              <span>{{data.creator_name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="申请时间：">
              <span>{{data.created_at}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="原稳定性箱编号：">
              <span>{{data.old_instrument.instrument_no}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="原稳定性箱名称：">
              <span>{{data.old_instrument.instrument_name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="放/取样计划编号：">
              <span>{{data.plan_no	}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="更换后稳定性箱编号：">
              <span>{{data.new_instrument.instrument_no}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="更换后稳定性箱名称：">
              <span>{{data.new_instrument.instrument_name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="样品名称：">
              <span>{{data.sample_info.sample_name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="稳定性方案：">
              <span>{{data.stability_scheme_name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="稳定性考察类型：">
             <span>{{data.inspect_type.inspect_type_name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="放置条件：">
              <span>{{data.place_conditions.place_conditions_name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目名称：">
              <span>{{data.project_name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目负责人：">
              <span>{{data.project_leader_name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="">
              
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      </el-card> -->
      <itemTitle title="审批记录"></itemTitle>
      <comment-view :datas="auditData"/>
      <!-- <el-card header="审批记录" shadow="never" style="margin-top: 20px">
        <comment-view :datas="auditData"/>
      </el-card> -->
    </div>
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body
               :before-close="cancel" :close-on-click-modal="false" v-if="open">
      <el-form ref="form" :model="form" :rules="rules"
               label-width="100px" size="small">
         <el-form-item label="结论" prop="radio">
          <el-radio-group v-model="form.radio">
            <el-radio v-for="(item,index) in buttonList" :key="index" :label="item.Type">{{item.Name}}</el-radio>
                <!-- <el-radio :label=item.id v-for="(item,index) in buttons" :key="index">{{item.value}}</el-radio> -->
          </el-radio-group>

          <!-- <el-radio v-model="form.radio" label="1">确认变更</el-radio>
          <el-radio v-model="form.radio" label="2">取消变更</el-radio> -->
        </el-form-item>
        <el-form-item label="处理意见" prop="suggestion">
          <el-input
            v-model="form.suggestion"
            type="textarea"
            placeholder="请输入处理意见"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button plain size="small" @click="cancel">取 消
        </el-button>
        <el-button size="small" type="primary" @click="submitForm">
          确定
        </el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import {Sdetail,qUpdate,undoX} from "@/api/stability/change";
  import { viewQuality, flowDetail, applyCheck, undoCheck } from '@/api/sampleInspection'

  export default {
    data() {
      return {
        id:'',
        title: '审批',
        left: 'left',
        data:{
        inspect_type:{},
        old_instrument:{},
        new_instrument:{},
        sample_info:{},
        place_conditions:{}
        },
        auditData: {},
        auditButtonName: '审批',
        isAudit: false,
        userInfo: null,
        buttons:[],
        open: false,
        formOpen: {
          check_advice: '',
          check_status: 1
        },
        form:{
          radio:'1',
          suggestion:'',
        },
        rules: {
          check_advice: [
            { required: true, message: '请输入审批意见', trigger: 'blur' }
          ]
        },
        buttonList:[],
      }
    },
    //是计算属性，也可以理解为一个方法。
    computed: {},
    //属性是手动定义的所需监听的值
    watch: {},
    //生命周期 - 创建完成（访问当前this实例）
    created() {
      this.detailData()
      this.userInfo = this.$store.getters.userInfo
      if (this.$route.query.f_id) {
        this.getAuditData(this.$route.query.f_id)
      }
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    },
    //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
    methods: {
      //获取详情
      detailData() {
        Sdetail(this.$route.query.f_id).then(res => {
          if (res.code === 200) {
            this.data = res.data || []
            this.id = res.data.id
            console.log(this.data)
            if(this.data.instrument_check!=undefined){
              let buttons = this.data.instrument_check.next[0].Buttons
                buttons.forEach(item=>{
                if(item.Type=='Next'){
                    let obj = {
                    value:item.Name,
                    id:'1'
                    }  
                    this.buttons.push(obj)
                }else if(item.Type=='Refuse'){
                    let obj = {
                    value:item.Name,
                    id:'2'
                    }  
                    this.buttons.push(obj)
                }else if(item.Type=='Reject'){
                    let obj = {
                    value:item.Name,
                    id:'3'
                    }  
                    this.buttons.push(obj)
                }else{
                    let obj = {
                    value:item.Name,
                    id:'4'
                    }  
                    this.buttons.push(obj)
                }
                console.log(this.buttons)
                })
            }
          }
        })
      },

      //返回
      handleBack() {
        this.$route.params.refresh = true;
        this.$router.go(-1)
      },

      getAuditData(id) {
        this.$api.PROJECT_START_CHECK_DETAIL(id).then(res => {
          if (res.code === 200) {
            this.auditData = res.data
            this.getButton()
          }
        })
      },
      getButton() {
        if (this.auditData.State !== 'Done' || this.auditData.State !== 'Refuse') {
          if (this.auditData.Next && this.auditData.Next.length) {
            for (let i = 0; i < this.auditData.Next.length; i++) {
              const data = this.auditData.Next[i]
              const index = data.Staffs.findIndex(a => a === this.userInfo.user.id)
              if (index !== -1) {
                this.isAudit = true
                this.auditButtonName = data.ItemName
                this.buttonList = data.Buttons ||[]
                let sss = this.buttonList.findIndex(a=>a.Type == 'Cancel')
                if(sss !== -1){
                   this.buttonList.splice(sss,1)
                }
                break
              }
            }
          }
        }
      },
    refreshData() {
      this.detailData()
      this.getAuditData(this.$route.query.f_id)
    },
    toEdit: function(affairs) {
      // console.log(affairs)
      // this.$router.push({
      //   name: 'submitApproval',
      //   query: {
      //     auditProjectId: this.projectId,
      //     types: 1
      //   }
      // })
    },
    // affairsId, stepId , type  //选择类型, template //备注, RejectStepId  //步骤id, isVisible
    onSubmit: function(affairsId, stepId, type, template, RejectStepId, callback) {
      console.log(affairsId, stepId, type, template, RejectStepId)
      const subdata = {
        id: this.id,
        status: type,
        step_id: RejectStepId || '',
        info_advice: template.Remark,
        Files: template.Files
      }
      qUpdate(subdata).then(res=>{
          if(res.code==200){
          this.$message.success('审批成功')
          this.detailData()
          this.getAuditData(this.$route.query.f_id)
          this.open = false
          callback(true)
          }else{
          this.$message.error(res.msg)
          }
      })
    },
    onCancel(affairsId, stepId, type, template, RejectStepId, callback) {
      const subdata = {
        flow_id: this.$route.query.f_id,
        model_type: 'ExchangeStability'
      }
      this.$comFun.cancelFunc(subdata).then(() => {
        callback(true)
        this.$message({
          type: 'success',
          message: '已撤销'
        })
        this.detailData()
        this.getAuditData(this.$route.query.f_id)
      }).catch(err => {
        this.$message.error(err)
      })
      // this.undoX(subdata).then(() => {
      //   callback(true)
      //   this.$message({
      //     type: 'success',
      //     message: '已撤销'
      //   })
      //   this.detailData()
      //   this.getAuditData(this.$route.query.f_id)
      // }).catch(err => {
      //   this.$message.error(err)
      // })
    },
      handlAnd() {
        this.open = true
      },
      cancel() {
        this.formOpen = {
          check_advice: '',
          check_status: 1
        }
        this.form={
          radio:'1',
          suggestion:'',
        },
        this.open = false
      },
      submitForm() {
        this.$refs.form.validate((valid) => {
            let data = {
              id:this.id,
              status:this.form.radio,
              deal_advice:this.form.suggestion
            }
            if (valid) {
            qUpdate(data).then(res=>{
                if(res.code==200){
                this.$message.success('审批成功')
                this.detailData()
                this.getAuditData(this.$route.query.f_id)
                this.open = false
                }else{
                this.$message.error(res.msg)
                }
            })
            }
        })
      }
    }
  }
</script>
<style scoped>
  /* @import url(); 引入css类 */
  .el-row {
    display: flex;
    justify-content: flex-start;
    flex-flow: wrap;
  }
</style>
